<template>
  <div name="serch">
    <div class="s-serch">
      <div class="serchboxs">
        <div class="choose-title">查询条件</div>
        <div class="choose-content">
          <div class="choose-item">
            <b>资源分类:</b>
            <p>
              <span :class="{ act: parms.zyflValue == index }" @click="change('zyflValue', index)" v-for="(d, index) in zyfl" :key="d.id">{{ d.name }}</span>
            </p>
          </div>
          <div class="choose-item">
            <b>提供方式:</b>
            <p>
              <span :class="{ act: parms.tgfsValue == index }" @click="change('tgfsValue', index)" v-for="(d, index) in tgfs" :key="d.id">{{ d.name }}</span>
            </p>
          </div>
          <div class="choose-item">
            <b>搜索领域:</b>
            <p>
              <span :class="{ act: parms.sslyValue == index }" @click="change('sslyValue', index)" v-for="(d, index) in ssly" :key="d.id">{{ d.name }}</span>
            </p>
          </div>
          <div class="choose-item">
            <b>开发条件:</b>
            <p>
              <span :class="{ act: parms.kftjValue == index }" @click="change('kftjValue', index)" v-for="(d, index) in kftj" :key="d.id">{{ d.name }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="serchcontent">
        <div class="ctitle">
          共有
          <span>5</span>
          个资源
        </div>
        <div class="serchlist-content">
          <DataRihghtList :data="dataList" />
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parms.pageNum"
            :page-size="parms.pageSize"
            layout="prev, pager, next, jumper"
            :total="9296"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DataRihghtList from "@/components/pc/DataDirectory/DataRihghtList";
export default {
  name: "serch",
  components: {
    DataRihghtList,
  },
  data() {
    return {
      zyfl: [
        { name: "全部", id: 1 },
        { name: "主题资源", id: 2 },
        { name: "部门资源", id: 3 },
        { name: "县区资源", id: 4 },
      ],
      tgfs: [
        { name: "全部", id: 1 },
        { name: "文件", id: 2 },
        { name: "API服务", id: 3 },
        { name: "数据集", id: 4 },
      ],
      ssly: [
        { name: "全部", id: 1 },
        { name: "安全生产", id: 2 },
        { name: "财税金融", id: 3 },
        { name: "城建住房", id: 4 },
        { name: "地理空间", id: 5 },
        { name: "工业农业", id: 6 },
        { name: "机构团体", id: 7 },
        { name: "教育文化", id: 8 },
        { name: "交通运输", id: 9 },
        { name: "社保就业", id: 10 },
        { name: "社会救助", id: 11 },
        { name: "生活服务", id: 12 },
        { name: "生态环境", id: 13 },
        { name: "市场监管", id: 14 },
        { name: "信用服务", id: 15 },
        { name: "医疗卫生", id: 16 },
        { name: "资源能源", id: 17 },
        { name: "旅游休闲", id: 18 },
        { name: "政务服务", id: 19 },
        { name: "科技创新", id: 20 },
        { name: "法律服务", id: 21 },
        { name: "商贸流通", id: 22 },
        { name: "气象服务", id: 23 },
      ],
      kftj: [
        { name: "全部", id: 1 },
        { name: "有条件开放", id: 2 },
        { name: "无条件开放", id: 3 },
      ],
      parms: {
        zyflValue: null,
        tgfsValue: null,
        sslyValue: null,
        kftjValue: null,
        pageSize: 5,
        pageNum: 1,
      },
      dataList: [],
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    change(d, index) {
      if (d) {
        if (this.parms[d] != index) {
          this.parms[d] = index;
          this.getDate();
        }
      }
    },
    getDate() {
      this.$http
        .post("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/dataPool/dataPoolPager", this.parms)
        .then(res => {
          if (res.code == 0) {
            this.dataList = res.data.rows;
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      su.scroll.scrollTop();
      this.parms.pageNum = val;
      this.getDate();
    },
  },
};
</script>
